<template>
    <div class="nav">
        <div class="left">
            <span class="big" :class="sColor(buyArr.rise_price)">{{buyArr.last_price}}</span>
            <br>
            <span :class="sColor(buyArr.rise_price)">{{buyArr.rise_price | toDe }}&nbsp;&nbsp;{{buyArr.rise_pre | toDe2 }} </span>
        </div>
        <div class="middle">
            <span>{{buyArr.code_name}}</span>
            <br>
            <span class="tips">{{buyArr.stock_code}}</span>
        </div>
        <div class="right">
        	<img  :src="imgUrl"  @click="add"/>
            <img src="../../assets/transaction_search.png"  @click="search" alt="">
        </div>
    </div>
</template>
<script>
import deal from '@/api/deal/index'
import { toast } from '@/util/index'
export default {
		data(){
			return{
				buyArr:{
					rise_price:0,
					rise_pre:0,
				},
				imgUrl:require("../../assets/transaction_-.png"),
				flag:"",
				clearTime:""
			}
		},
	    methods:{
	        search(){
	            this.$router.push({path: '/Search'});
	        },
	        sColor(name){
	        	if(name>0){
	        		return "red";
	        	}
	        	
	        },
	        add(){
	        	//this.flag=!this.flag;
				let senddata = {
					code:this.buyArr.stock_code,
					userId:window.localStorage.getItem("token"),
					plat:"mlj"
				}
				if(this.flag){	
					deal.addMyChoose(senddata).then((res) => {
						if (res.data.code == 200) {
							this.imgUrl=require("../../assets/transaction_-.png");
							this.flag=!this.flag;
						}else {
							toast(res.data.message)
						}
					})
				}else{
					deal.delChoose(senddata).then((res) => {
						if (res.data.code == 200) {
							this.imgUrl=require("../../assets/transaction_+.png");
							this.flag=!this.flag;
						}else {
							toast(res.data.message)
						}
					})
				}
				
	        	
	       },
	       	init(){
	       		let senddata = {
			    	code:this.$route.query.stockNum||"000001",
			    	userId:window.localStorage.getItem("token"),
			    	plat:"mlj"
			    }
				deal.getStockByCode(senddata).then((res) => {
					if (res.data.code == 200) {
							this.$store.dispatch('saveBuyArr',res.data.data);
							this.buyArr=this.$store.state.buyArr;
							if(res.data.data.isChoose==1){
								this.flag=false;
					    	  	this.imgUrl=require("../../assets/transaction_-.png");
				    	  	}else{
				    	  		this.flag=true;
					    	  	this.imgUrl=require("../../assets/transaction_+.png");
				    	  	}
							
					}else if(res.data.code == 222){
							this.$router.push({ path: '/login' })
					} else {
						toast(res.data.message)
					}
				})
	      	},
	      	setTime() {
		        this.clearTime=setInterval(() => { 
		            this.init();
		        }, 1000)
	    	},
	      
	    },
	    
	    filters:{
	    	toDe(num){
	    		if(num>0){
	    			return "+"+num;
	    			
	    		}else{
	    			return  num;
	    		}
	    	},
	    	toDe2(num){
	    		if(num>0){
	    			return "+"+num+"%";
	    			
	    		}else{
	    			return  num+"%";
	    		}
	    	},
	    	
	    },
	    beforeMount(){
	    	 this.init();
	
	    },
	   
	    destroyed () {
		  clearInterval(this.clearTime);
		}
    
}
</script>

<style lang="less" scoped>
@import '../../less/config.less';
@s24: 0.32rem;
.nav {
    width: 100%;
    height: 2.6667rem;
    padding: 0 @p30;
    font-size: @s24;
    margin: @marginbm 0;
    margin-top: 0;
    background-color: @liBg;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 0.8;
    div {
        display: flex;
        flex-direction: column;
    }
    .left {
        color: #33ffc3;
        line-height: 0.8;
        .big {
            font-size: 0.8rem;
        }
        .red{
        	color: #FF335B;
        }
    }
    .middle {
        color: #fff;
        font-size: 0.48rem;
        .tips {
            color: @Color;
            font-size: @s24;
        }
    }
    .right{
    		display: flex;
    		justify-content:center;
    		align-items: center; 
    		flex-direction:row;
    		img {
		       
		        width: 1.066rem;
		        height: 1.066rem;
		    }
    }
    
}
</style>
